<template>
	<view style="background-color: #f9f9f9;height: 667px;">
		<!-- 搜索组件 -->
		<view class="search">
			<view class="icon-cl">
				<image class="icon" src="/static/myorder/search.png" />
			</view>
			<input class="text" v-model="query" @confirm="search" placeholder="输入关键字搜索" />
		</view>


		<scroll-view v-if="!isSearch" class="scroll-container" scroll-y style="height: 600px;">
			<!-- 热门标题 -->
			<view style="font-weight: bold; margin-top: 10px; margin-left: 10px;">热门活动</view>

			<!-- 轮播图区域 -->
			<!-- 			<view>
			  <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
			    indicator-color="white" indicator-active-color="grey">
			    <swiper-item v-for="(actItem, i) in activityList.list.slice(0, 3)" :key="i">
			      <navigator class="swiper-item" :url="'/pages/goods_detail/main?goods_id=' + actItem.goods_id">
			        <image :src="actItem.activityImage"></image>
			      </navigator>
			
			      <button class="button1" @click="gotoDetail(actItem.activityId)"
			        style="z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0);">
			      </button>
			    </swiper-item>
			  </swiper>
			</view> -->

			<!-- swiper -->
			<swiper :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval" :duration="duration"
				:indicator-active-color="indicatorActiveColor + ' '" circular="true" class="pic-swiper" indicator-dots
				previous-margin="20rpx" next-margin="20rpx">
				<block v-for="(item, index) in activityList.list.slice(0, 3)" :key="index">
					<swiper-item class="banner-item">
						<view class="img-box">
							<image :src="item.activityImage" :data-prodid="item.relation"
								@tap="gotoDetail(item.activityId)" class="banner"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<!-- end swiper -->

			<view class="cat-item">
				<view class="item" @tap="toClassifyPage" data-sts="1">
					<image src="/static/images/icon/newProd.png"></image>
					<text>新品推荐</text>
				</view>
				<view class="item" @tap="toClassifyPage" data-sts="1">
					<image src="/static/images/icon/timePrice.png"></image>
					<text>限时特惠</text>
				</view>
				<view class="item" @tap="toClassifyPage" data-sts="3">
					<image src="/static/images/icon/neweveryday.png"></image>
					<text>每日疯抢</text>
				</view>
				<view class="item" @tap="toCouponCenter">
					<image src="/static/images/icon/newprods.png"></image>
					<text>领优惠券</text>
				</view>
			</view>

			<!-- 推荐标题 -->
			<view style="font-weight: bold; margin-top: 20px; margin-left: 10px;"><text>推荐活动</text></view>

			<view v-for="(actItem, actIdx) in activityList.list" :key="actIdx" class="list1"
				style="position: relative;">
				<view class="part1">
					<image class="image1" :src="actItem.activityImage" mode="aspectFill"></image>
					<text style="margin-top: 5px;margin-left: 20px;">{{actItem.activityName}}</text>
				</view>
				<view class="part2">
					<image class="image2" src="../../static/home/Apple.png" mode="aspectFill"></image>
					<text class="store-name">Apple Store 官方旗舰店</text>
				</view>
				<button class="button1" @click="gotoDetail(actItem.activityId)"
					style="z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0);">
					<!-- 移除点击参与文本 -->
				</button>
			</view>
		</scroll-view>
		<scroll-view v-else class="scroll-container" scroll-y style="height: 600px;">
			<view v-for="(actItem, actIdx) in filterList.list" :key="actIdx" class="list1">
				<view class="part1">
					<image class="image1" :src="actItem.activityImage" mode="aspectFill"></image>
					<text style="margin-top: 5px;margin-left: 20px;">{{actItem.activityName}}</text>
				</view>
				<view class="part2">
					<image class="image2" src="../../static/home/Apple.png" mode="aspectFill"></image>
					<text style="font-size: 14px;margin-top: 10px;">Apple Store 官方旗舰店</text>
					<button class="button1" @click="gotoDetail(actItem.activityId)"
						style="z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0);">
					</button>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	// 搜索框
	export default {
		props: {
			// 背景颜色
			bgcolor: {
				type: String,
				default: '#b73829'
			},
			// 圆角尺寸
			radius: {
				type: Number,
				default: 10
			}
		},

		data() {
			return {
				indicatorDots: true,
				indicatorColor: '#d1e5fb',
				indicatorActiveColor: '#1b7dec',
				autoplay: true,
				interval: 2000,
				duration: 1000,
				isSearch: false,
				query: '',

				userdata: {
					userId: '',
					token: '',
				},
				activityList: {
					current: 1,
					size: 10,
					total: 0,
					list: [],
				},
				filterList: {
					current: 1,
					size: 10,
					total: 0,
					list: [],
				},
				//轮播图数据列表
				swiperList: [{
						"image_src": "../../static/home/banner1.png",
						"open_type": "navigate",
						"goods_id": 129,
						// "navigator_url":"/pages/goods_detail/main?goods_id=129"
					},
					{
						"image_src": "../../static/home/banner2.png",
						"open_type": "navigate",
						"goods_id": 395,
						// "navigator_url":"/pages/goods_detail/main?goods_id=395"
					},
					{
						"image_src": "../../static/home/banner3.png",
						"open_type": "navigate",
						"goods_id": 38,
						// "navigator_url":"/pages/goods_detail/main?goods_id=38"
					}
				]
			};
		},
		onLoad() {
			//调用方法，获取轮播图数据
			// this.getSwiperList()
			this.getStorage()

			this.getActivities()
			console.log(this.userdata.token, 'token')
		},
		methods: {

			async search(res) {
				// 获取用户输入的查询字符串
				this.query = res.detail.value
				const query = this.query.trim().toLowerCase();
				if (!query) {
					this.isSearch = false
					return;
				}
				await this.$myRequest({
					url: '/organizer/getActivities?activityName=' + query +'&startTime='+'&endTime='+ '&size=' + this.filterList.size +
						'&current=' + this.filterList.current,
					method: 'GET',
					header: {
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded'
					},

				}).then(res => {
					this.isSearch = true
					this.filterList.list = res.data.list
					console.log(this.filterList.list);
				}).catch(err => {
					console.log(err);
				})

			},
			// async getSwiperList() {
			//   const {
			//     data: res
			//   } = await uni.$http.get('/api/public/v1/home/swiperdata')
			//   //请求失败
			//   if (res.meta.status != 200) return uni.$showMsg()
			//   this.swiperList = res.message
			// },
			async getStorage() {
				const openId = uni.getStorageSync('openId')
				const token = uni.getStorageSync('token')
				this.userdata.userId = openId
				this.userdata.token = token
			},

			getActivities() {
				this.$myRequest({
					url: '/organizer/getActivities?&activityName=&startTime=&endTime=&size=10&current=1',
					method: 'GET',
					header: {
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded'
					},
				}).then(res => {
					// console.log(res)
					this.activityList.list = [...this.activityList.list, ...res.data.list]
				}).catch(err => {
					console.log(err);
				})

			},
			// async getSwiperList() {
			// 	const {
			// 		data: res
			// 	} = await uni.$http.get('http://localhost:8080/organizer/getActivities')
			// 	//请求失败
			// 	if (res.meta.status != 200) {
			// 		console.log(res)
			// 		return uni.$showMsg()
			// 	} else {
			// 		console.log(res)
			// 	}
			// 	this.swiperList = res.message
			// },

			// 搜索跳转
			searchBoxHandler() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},

			// 抽奖页面
			gotoDetail(id) {
				uni.navigateTo({
					// url: '/pages/lottery/lottery?activityId=' + id
					url: '/pages/lottery-game/lottery-game?activityId=' + id
				})
			}
		}

	}
</script>

<style lang="scss">
	/* 搜索框样式 */

	.search {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-left: 3%;
		width: 94%;
		height: 60rpx;
		background-color: whitesmoke;
		margin-top: 5%;
		border: 1rpx solid whitesmoke;
		border-radius: 20rpx;
	}

	/* 搜索框提示文字样式 */
	.search input {
		font-size: 27rpx;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		padding-left: 30rpx;
	}

	/* 搜索框小图标 */
	.search image {
		width: 40rpx;
		height: 40rpx;
		padding-right: 20rpx;
	}

	.list1 {
		background-color: #FFFFFF;
		border: lightgray solid 1px;
		border-radius: 1%;
		width: 92%;
		height: 470rpx;
		margin-left: 4%;
		margin-top: 10px;
		overflow-y: hidden;
	}

	.list1 .part1 .image1 {
		height: 320rpx;
		width: 100%;
	}

	.list1 .part2 {
		margin-top: 5px;
		height: 80rpx;
		// height: 100%;
		width: 95%;
		margin-left: 10px;
		border-radius: 100%;
		display: flex;
	}

	.list1 .part2 .image2 {
		margin-top: 5px;
		height: 60rpx;
		width: 60rpx;
		border-radius: 100%;
	}

	.scroll-container {
		height: 980rpx;
	}

	swiper {
		height: 370rpx;
		margin-top: 20rpx;
		width: 94%;
		margin-left: 3%;

		.swiper-item,
		image {
			border-radius: 1%;
			width: 100%;
			height: 100%;
		}
	}

	.my-search-container {
		height: 120rpx;
		display: flex;
		align-items: center;
		padding: 0 10px;


		.my-search-box {
			height: 60rpx;
			background-color: #FFFFFF;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			// border: lightgrey solid 2px;


			.placeholder {
				font-size: 15px;
				margin-left: 5px;
			}
		}
	}

	@import './responsive-font.scss';
	@import './index.css';

	.store-name {
		margin-top: 10px;
		@include responsive-font;
	}
</style>